import React from 'react'
import { useState, useEffect } from 'react'
import '../assets/css/goodslist.css'
import Top from '../components/top.jsx'
// hook
import { Link, useNavigate, useLocation } from 'react-router-dom'
// 引入接口
import { getCateList, Cartadd } from '../request/app'
function Home() {
    //state 接参
    const { state } = useLocation()
    // 编程式导航
    const Navigate = useNavigate()
    // uid
    const [xiaou, setXiaou] = useState(JSON.parse(sessionStorage.getItem('xiaou')))
    // 列表商品信息
    const [end, setend] = useState([])
    useEffect(() => {
        console.log(state.id);
        //一加载就调用接口
        getCateList().then((res) => {
            console.log(res.list, '列表页响应');
            setend([...res.list])
        })
    }, [])
    // 回退上一页
    const cliTop = () => {
        Navigate(-1)
    }
    // 加入购物车事件
    const cliCart = (idx) => {
        console.log(idx, 'aaaaaa');
        if (xiaou) {
            console.log(xiaou.uid);
            //调用 添加购物车接口
            Cartadd({
                uid: xiaou.uid,
                type: 1,
                goodsid: idx,
                num: 1
            }).then((res) => {
                console.log(res, '购物车添加');
                if (res.code == 200) {
                    // 跳转
                    Navigate('/index/cart')
                }
            })
        } else {
            // 跳转
            Navigate('/login')
        }

    }
    return (
        <div className='list'>
            <header>
                {/* 顶部 */}
                <div className='top'>
                    <Top />
                    <div className='top_om'>
                        {/* 点击事件 */}
                        <div onClick={() => cliTop()}>&lt;</div>
                        <div>商品列表</div>
                        <div>占位隐藏</div>
                    </div>
                    <div className='Ctop_3'>
                    <div>
                        <img src={require('../assets/img/形状@3x.png')} alt="" />
                        <input type="text" placeholder='按内容搜索' />
                        <button>搜索</button>
                    </div>
                </div>
                </div>
                
            </header>
            <div className='Lind'>
                <ul>
                    <li>综合推荐</li>
                    <li>销量</li>
                    <li>价格</li>
                    <li>好评</li>
                    <li>店铺</li>
                    <li>筛选</li>
                </ul>
            </div>
            <div className='Lind_center'>
                <div className='Lind_red'>
                    筛选双十一,特价商品
                </div>
                {/*  */}
                <div className='Cright'>
                    <div className='Cend1'>
                        {
                            end.map((item, idx) => {
                                return <Link id='link' to={'/detail'} state={{ id: item.id,type:1 }} key={item.id}>
                                    <div className='Cright_li' key={item.id}>
                                        <div>
                                            <img src={item.img} alt="" />
                                        </div>
                                        <div>
                                            <p className='li_p'><span>限时</span>{item.goodsname}</p>
                                            <p>{item.description}</p>
                                            {/*  */}
                                            <div className='Cright_li_1'>
                                                <div>
                                                    <p className='p_1'>￥{item.price} <s>￥{item.market_price}</s>
                                                    </p>
                                                    <p>999人已付款</p>
                                                </div>
                                                <div>
                                                    <button onClick={() => cliCart(idx + 1)}>加入购物车</button>
                                                </div>
                                            </div>
                                        </div>
                                        <div className='enn'>
                                            123
                                        </div>
                                    </div>
                                </Link>
                            })
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Home